<template>
  <div>
    <div class="header">
      <div class="logo">千禧瑞居</div>
      <h2>月末低价购房日</h2>
      <div class="sub_title">让天下没有买不起房子的人</div>
      <div class="content">
        <h5>时间：3月26日</h5>
        <h5>地点：临沂电视台一楼演播大厅</h5>
      </div>
    </div>
	<!--我们的优势-->
	<div class="youshi_wrap">
		<img src="/public/img/house/youshi.png" alt="">
	</div>
	
	
    <!-- 报名 -->
    <div class="form_wrap">
		  <div class="title">立即领取购房优惠</div>
      <avue-form class="crud" ref="crud" v-model="formData" :option="option" ></avue-form> 
      <button class="form-btn" @click="submit_info()">提交报名</button>
    </div>
	
	<!-- 活动流程 -->
	<div class="huodongliucheng_wrap">
		<div class="title">活动流程</div>
		<!-- <img  class="bar" src="/public/img/house/tiaofu.png" alt=""> -->
		<img class="content" src="/public/img/house/huodongliucheng.png" alt="">
		 <!-- <img class="content" src="/public/img/house/huodongliucheng1.png" alt="">
		<img class="content" src="/public/img/house/huodongliucheng2.png" alt=""> -->
	</div>
	
	<!-- 领导致辞 -->
	<div class="leader_wrap">
		<div class="title">领导致辞</div>
		<div class="row">
			<img src="/public/img/house/leader1.png" alt="">
			<img src="/public/img/house/leader2.png" alt="">			
		</div>
		<div class="row">
			<img src="/public/img/house/leader3.png" alt="">
			<img src="/public/img/house/leader4.png" alt="">
		</div>
		<div class="info">
			邀请电视台领导致辞，公司领导解读活动政策等
		</div>
	</div>
	
	
	<div class="choujiang_wrap">
		<div class="title">抽奖环节</div>
		<div class="row">
			<img src="/public/img/house/choujiang2.png" alt="">
			<img src="/public/img/house/choujiang1.png" alt="">		
		</div>
		<div class="info">
			现场预交订金客户即可参与砸金蛋抽奖，奖品最高价值5000元（苹果14、电视、空调、冰箱、洗衣机、微波炉、烤箱等）
		</div>
	</div>
    <div class="suishouli_wrap">
    	<div class="title">参与即送</div>
    	<div class="row">
    		<img src="/public/img/house/suishouli.png" alt="">    		
    	</div>
    	<div class="info">
    		所有来访者赠送每人份精美随手礼（随手礼推荐定制LOGO水杯礼盒、商务雨伞、空气加湿器等）
    	</div>
    </div>
	
	<!-- 其他图片 -->
	<div class="other_wrap">
		<div class="title">活动照片</div>
		<div class="row">
			<img src="/public/img/house/other1.png" alt="">
			<img src="/public/img/house/other2.png" alt="">
			<img src="/public/img/house/other3.png" alt="">
		</div>
	</div>
	
	
	
	<!-- 报名 -->
	<div class="form_wrap" style="margin-top:50px">
	  <div class="form_submit">
		  <div class="title">立即领取购房优惠</div>
	    <avue-form class="crud" ref="crud" v-model="formData" :option="option" ></avue-form> 
	    <button class="form-btn" @click="submit_info()">提交报名</button>
	  </div>
	</div>
	<div class="aboutus_wrap">
		<img src="/public/img/house/tiaofu.png" alt="">
		<div class="title">关于我们</div>
		<div class="content">千 禧 瑞 居 （ 山 东 ） 置 业 服 务 有 限 公 司 主 要 从 事 房 地 产 开 发 经 营 。  房 地 产 经 纪 ； 房 地 产 咨 询 ； 物 业 管 理 ； 企 业 管 理 ；
数 据 处 理 服 务 ； 会 议 及 展 览 服 务 ； 企 业 形 象 策 划 ； 社 会 经 济 咨 询 服 务 ； 文 艺 创 作 ； 组 织 文 化 艺 术 交 流 活 动 ； 文 化 用 品 设 备 出
租 ； 技 术 服 务 、 技 术 开 发 、 技 术 咨 询 、 技 术 交 流 、 技 术 转 让 、 技 术 推 广 ； 软 件 销 售 ； 计 算 机 软 硬 件 及 辅 助 设 备 零 售 ； 计 算 机
软 硬 件 及 辅 助 设 备 批 发 ； 工 艺 美 术 品 及 礼 仪 用 品 销 售 ； 互 联 网 销 售  。 </div>
	</div>
	
	
	
  
    <!-- <div class="content">
      <div>其他图片堆叠</div>
      <div class="activity">
        <div class="title">活动流程</div>
        <img src="/public/img/house/huodongliucheng.png" alt="">
      </div>


    </div> -->

  </div>
</template>

<script>
  import {addObj} from '@/api/realty/realtyintro.js'
  import {ElMessage} from 'element-plus'
  import { baseUrl } from '@/config/env';
  export default {
    name: "front-realty-intro",
    
    data(){
      return{
        formData:{},
        option: {
          emptyBtn:false,
          submitBtn:false,
          menuSpan:16,
          menuPosition:'right',
          column: [
           {
              label:'姓名',
              prop:'name',
              type:'input',
              // labelWidth:'60px',
           },
           {
              label:'手机号',
              prop:'tel',
              type:'input',
              // labelWidth:'60px',
           },
           {
              label:'意向地区',
              prop:'area',
              type:'select',
              // labelWidth:'60px',
              dicUrl: baseUrl+'/sys/dict/type/realty_area_type',
              
           }
          ]
        }
      }
    },
    created() {
      this.formData.introducer=this.$route.query.userId;
    },
    methods: {
      submit_info(){    
        if(this.formData.name==''||this.formData.tel==''){
          ElMessage({
            message:"请填写姓名和电话",
            type:'error'
          })
          return;
        }

        addObj(this.formData).then(res=>{
          if(res.data.code==0){
            ElMessage({
              message:'报名成功',
              type:'success'
            })
            this.formData={}
          }
        }).catch(error=>{        
        })
      }
    }
  };
</script>


<style lang="scss">
  * {
    padding: 0px;
    margin: 0px;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    font-family: Microsoft YaHei;
  }

  .header {
    position:relative;
    width: 100%;
    height: 400px;
    background: url(/img/house/banner-mobile.png) center top no-repeat;
    background-size: 100% 100%;
    color: #fff;
    .logo{
      position:absolute;
      left:0;
      right:0;
      margin:0 auto;
      width:90px;
      height: 35px;
      
      border: 1px solid #d7dae2;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      background-color: #fff;
      color:#30A15D;
      font-family: Microsoft YaHei;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      padding-top:5px;
      
    }
  
    h2 {
      display: flex;
      font-size: 45px;
      justify-content: center;
      padding-top: 100px;
      padding-bottom: 20px;
      color: #470109;
    }
    .sub_title{
      font-family: Microsoft YaHei;
      font-size: 20px;
      color: #470109;
      font-weight: bold;
      text-align: center;
    }
    .content {
      margin-top:60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: Microsoft YaHei;
      font-size: 20px;
      font-weight: bold;
      h5{
        padding-top:10px;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 10px;
        margin-top:10px;
        
        background: #FF5C2E;
        border-radius: 30px;
		&:nth-child(2){
			margin-top: 15px;
		}
      }
    }
  }

  .huodongliucheng_wrap{
	   margin-top:30px;
	  .title{
		 font-size:20px;
		 font-weight: bold;
		 font-family: Microsoft YaHei;
		 margin-bottom:5px;
		 margin-left: 3%;
	  }
	  // .bar{
		 //  width:100%;
		 //  height: 8px;
	  // }
	  .content{
		  box-sizing: border-box;
		  width:100%;
		  
	  }
  }

  .form_wrap{
    width:100%;
    margin-top:20px;
    .title{
      text-align: center;
      font-weight: bold;
      font-family: Microsoft YaHei;
      margin-bottom:10px;
      font-size:20px;
    }   
    .crud{
      margin-left: -18px;
    }
    .form-btn{       
      margin:0 auto;
      width: 300px;
      height: 40px;
      background-color: #F6400C;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      color:#fff;
      font-weight: bold;
      border:0;
    }
    
    
  }
  
  .youshi_wrap{
	  img{
		  width:100%;
	  }
  }

  .leader_wrap,.choujiang_wrap,.suishouli_wrap,.other_wrap{
	  margin-top:30px;
	  .title{
		  font-size:20px;
		  font-weight: bold;
		  font-family: Microsoft YaHei;
		  margin-bottom:5px;
		  margin-left: 3%;
	  }
	  .row{
		  display: flex;
		  justify-content: space-evenly;
		  margin-bottom:20px;
		  img{
			  width:45%;
			  border-radius: 10px;
		  }
	  }
	  .info{
		  font-family: Microsoft YaHei;
		  color:rgb(96, 98, 102);
		  font-size: 15px;
		  text-align: center;
		  
	  }
  }
  .other_wrap{
	  .row{
		  flex-direction: column;
		  img{
			  width:100%;
			  border-radius: 0px;
			  margin-bottom: 3px;
		  }
	  }
  }

	.suishouli_wrap{
		.row{ 
		  img{
			  width:100%;
			  border-radius: 0px;
		  }
		}
	}
	.aboutus_wrap{
		margin-top:30px;
		// border:1px solid black;
		// background-color: #efefef;
		
		img{
			width:100%;
			height: 10px;
		}
		.title{
			font-size:20px;
			font-weight: bold;
			font-family: Microsoft YaHei;
			text-align: center;
			margin-bottom:5px;
		}
		.content{
			// color:#fff;
			padding:10px;
			font-size:14px;
			
			
			
			
			
		}
	}



</style>
